import { useState, useEffect } from "react";
import store from "../store";
import { increment, decrement } from "../store/actions/couter";

export default function Counter() {
    const [count, setCount] = useState(store.getState()["counter"]["count"]);
    useEffect(() => {
        store.subscribe(() => {
            setCount(store.getState()["counter"]["count"]);
        });
    }, []);
    return (
        <>
            <div className='alert alert-info'>当前count的值为：{count}</div>
            <div className='btn-group'>
                <button
                    className='btn btn-primary'
                    onClick={() => store.dispatch(increment(3))}
                >
                    增加
                </button>
                <button
                    className='btn btn-danger'
                    onClick={() => store.dispatch(decrement(2))}
                >
                    减少
                </button>
            </div>
        </>
    );
}
